<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-tree
          ref="category"
          node-key="id"
          :data="categories"
          :props="{label: 'name'}"
          :expand-on-click-node="false"
          default-expand-all
          highlight-current
          @current-change="selectNode"
        /></div>
      <div class="right">
        <div style="padding:10px">
          <el-button size="mini" type="primary" @click="addConfirmClick">新增职位</el-button>
        </div>
        <el-table :data="jobList">
          <el-table-column type="selection" align="center" width="55" />
          <el-table-column prop="name" align="center" label="职位名称" />
          <el-table-column prop="code" align="center" label="职位编码" />
          <el-table-column prop="departmentName" align="center" label="所在部门" />
          <el-table-column prop="jobType" align="center" label="对应职务" />
          <el-table-column prop="level" align="center" label="对应职别" />
          <el-table-column prop="state" align="center" label="职位状态">
            <template #default="{row}">
              <span :class="{stateActive: row.state === 1, stateInactive: row.state === 0}">{{ row.state === 1 ? "启用" : "未启用" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120px">
            <template #default="{row}">
              <el-button type="text" size="mini" @click="delConfirmClick(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <AddDept
      :dialog-visible="showDialog"
      @close="close"
      @position="getJobList"
    />
  </div>
</template>

<script>
import { getCategoryList, getJobList, delJob } from '@/api/homework/position'
// import { transTree } from '@/utils'
import AddDept from '@/views/zhiweiguanli/components/add-dept.vue'
export default {
  components: {
    AddDept
  },
  data() {
    return {
      categories: [], // 职位类别列表
      jobList: [], // 部门员工数据
      showDialog: false
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    close() {
      this.showDialog = false
    },
    addConfirmClick() {
      // console.log('323')
      this.showDialog = true
    },
    // 获取职位类别数据
    async getCategories() {
      // 调用职位类别接口
      const res = await getCategoryList()
      this.categories = res.data
      // 记录初始部门id
      this.categoryId = this.categories[0].id
      // 使用代码选中初始部门
      this.$nextTick(() => {
        this.$refs.category.setCurrentKey(this.categoryId)
      })
      // 获取右侧职位列表数据
      this.getJobList()
    },
    // 获取部门中的员工列表数据
    async getJobList(categoryId) {
      const res = await getJobList(categoryId)
      this.jobList = res.data
    },

    // 监听节点的点击事件，记录节点
    selectNode(nodeObj) {
      this.categoryId = nodeObj.id
      if (this.categoryId === 1 || this.categoryId === 2) {
        this.getJobList()
      } else {
        this.getJobList(this.categoryId)
      }
    },
    delConfirmClick(id) {
      this.$confirm('此操作将永久删除该权限点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 2. 调用删除接口
        await delJob(id)
        // 3. 提示用户
        this.$message.success('删除权限点成功')
        // 4. 刷新列表
        this.getJobList()
      })
    }

  }

}

</script>

<style scoped lang="scss">
.app-container {
  background: #fff;
  display: flex;

  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }

  .right {
    flex: 1;
    padding: 20px;
  }
}
</style>
